<template>
  <view class="">
    <view class="page-list">
      <view class="list-child" v-for="(item,index) in dynamicData" :key="index">
        <view class="child-user">
          <image class="user-pic" :src="userData.avatar" mode="aspectFill"></image>
          <view class="user-info">
            <view class="info-name page-line1">
              {{ userData.nickname }}
            </view>
            <view class="info-time">
              {{ item.timeData }}发布
            </view>
          </view>
          <view class="user-del" v-if="isShowDeleteItem">
            <u-icon name="trash" color="#42C9F9" size="30"></u-icon>
            <view class="del-text">
              删除
            </view>
          </view>
        </view>
        <view class="child-context">
          {{ item.title }}
        </view>
        <view class="child-imgList">
          <image @click="picView(pIndex,JSON.parse(item.image_list))" class="imgList-one" v-for="(pItem,pIndex) in JSON.parse(item.image_list)" :key="pIndex" mode="aspectFill"
                 :src="pItem"></image>
        </view>
        <view class="child-address" v-if="item.map_content">
          {{ item.map_content }}
        </view>
      </view>
    </view>
  </view>

</template>
<script setup lang="ts">
const props = defineProps({
  isShowDeleteItem: {
    type: Boolean,
    default: () => false
  },
  dynamicData: {
    type: Array,
    default: () => []
  },
  userData: {
    type: Object,
    default: () => {}
  }
})

const picView = (current:any,urls:any) => {
  uni.previewImage({
    current,
    urls
  })
}
</script>
<style scoped lang="scss">
.page-list {
  .list-child {
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    border-bottom: 2rpx solid #eeeeee;
    .child-user {
      display: flex;
      align-items: center;
      .user-pic {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .user-info {
        width: 100%;
        font-size: 26rpx;
        color: #999999;
        margin-left: 20rpx;
        .info-name {
          font-size: 36rpx;
          color: #111111;
        }
      }
      .user-del {
        padding: 10rpx 30rpx;
        border-radius: 40rpx;
        color: #42C9F9;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border: 1rpx solid #42C9F9;
        flex-shrink: 0;
      }
    }
    .child-context {
      margin-top: 20rpx;
      font-size: 30rpx;
      color: #111111;
    }
    .child-imgList {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 20rpx;
      margin: 20rpx auto;
      .imgList-one {
        width: 100%;
        height: 196rpx;
        border-radius: 20rpx;
      }
    }
    .child-address {
      font-size: 24rpx;
      color: #999999;
    }
  }
}
</style>